<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>layui</title>
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <link rel="stylesheet" href="../lib/layui-v2.5.5/css/layui.css" media="all" />
    <link rel="stylesheet" href="../css/public.css" media="all" />
  </head>
  <body>
    <div class="layuimini-container">
      <div class="layuimini-main">
        <div id="searchBox">
          <form class="layui-form layui-form-pane" action="">
            <div class="layui-form-item">
              <div class="layui-inline">
                <label class="layui-form-label">操作人</label>
                <div class="layui-input-inline">
                  <input type="text" id="searchname" name="name" autocomplete="off" class="layui-input" />
                </div>
              </div>
              <div class="layui-inline">
                <label class="layui-form-label">子系统</label>
                <div class="layui-input-inline" style="width: 160px">
                  <select name="system" lay-filter="system-select" id="system_select"></select>
                </div>
              </div>
              <div class="layui-inline">
                <label class="layui-form-label">标题</label>
                <div class="layui-input-inline">
                  <input type="text" id="title" name="title" autocomplete="off" class="layui-input" />
                </div>
              </div>
              <div class="layui-inline">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-inline">
                  <input type="text" id="memo" name="memo" autocomplete="off" class="layui-input" />
                </div>
              </div>
              <div class="layui-inline">
                <label class="layui-form-label">起始时间</label>
                <div class="layui-input-inline" style="width: 200px">
                  <input
                    id="timeformatExample1"
                    type="text"
                    autocomplete="off"
                    class="Wdate layui-input"
                    onclick="WdatePicker({dateFmt:'yyyyMMdd HH:mm:ss'})"
                  />
                </div>
              </div>
              <div class="layui-inline">
                <button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
                <button type="reset" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-reset-btn">重置</button>
              </div>
            </div>
          </form>
        </div>
        <table class="layui-hide" id="currentTableId" lay-size="sm" lay-filter="currentTableFilter"></table>
      </div>
    </div>
    <script id="syscodeSelect" type="text/html">
      <!--layui模板引擎，动态添加后台数据-->
      {{# layui.each(d, function(index, item){ }}
      <option value="{{  item.sys_code  }}">{{ item.name }}</option>
      {{# }); }}
    </script>
    <style>
      #searchBox .layui-inline {
        margin: 0 0px 10px 0;
      }
      .layui-form-item {
        margin: 0 !important;
      }
      #colorExam {
        padding: 0 10px 0;
      }
      .spanItem {
        line-height: 20px;
        margin-right: 20px;
        display: inline-block;
      }
      .spanItem span {
        display: inline-block;
        width: 20px;
        height: 20px;
        position: relative;
        top: 2px;
      }
      .spanItem .redItem {
        background: #4f7ecb;
      }
      .spanItem .blueItem {
        background: #e34d4d;
      }
      .layui-form-pane .layui-input-inline {
        width: 120px;
      }
    </style>

    <script src="../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../js/jquery-3.5.1.min.js"></script>
    <script src="../js/common.js" charset="utf-8"></script>
    <script src="../js/base.js" charset="utf-8"></script>
    <script type="text/javascript" src="../js/My97DatePicker/WdatePicker.js"></script>
    <script>
      //curData存储当前操作行的数据 用于给iframe弹窗传值
      let curData = {};
      layui.use(["form", "table", "laydate", "myModule", "laytpl"], function () {
        //初始化开始
        var $ = layui.jquery,
          form = layui.form,
          table = layui.table,
          layuimini = layui.layuimini,
          myModule = layui.myModule,
          laytpl = layui.laytpl,
          laydate = layui.laydate;

        let tableBlue = "#4f7ecb"; //表格蓝色
        let tableRed = "#e34d4d"; //表格红色
        //设置表格高度
        let tableHeight = getBaseHeight() - $("#searchBox").outerHeight() - 20;
        //时间选择器
        // $("#timeformatExample1").timepicker({ timeFormat: "H:i:s" });
        //获取子系统下拉框信息
        //ajax
        myModule.ajax({
          url: "../api/syscode-select.json",
          type: "GET",
          dataType: "json",
          success: function (res) {
            var getTpl = $("#syscodeSelect").get(0).innerHTML;
            var view = $("#system_select").get(0);
            console.log("res.data", res.data);
            var html = laytpl(getTpl).render(res.data, function (html) {
              view.innerHTML = html;
            });
            form.render("select");
          },
          error: function () {
            // layer.close(loadInd);
          },
        });
        /***********************************表格渲染及表格操作按钮监听********************************************/
        //构建表格
        table.render({
          elem: "#currentTableId",
          height: tableHeight, //设置表格高度
          contentType: "application/json",
          where: {
            name: "", //操作人
            ip: "",
            date_time: "",
            sys_code: "14",
            page_name: "",
            //menu_id: '',
            title: "",
            memo: "",
          }, //如果无需传递额外参数，可不加该参数
          // method: 'post', //如果无需自定义HTTP类型，可不加该参数
          toolbar: "#toolbarDemo",
          defaultToolbar: [
            "filter",
            "exports",
            "print",
            {
              title: "提示",
              layEvent: "LAYTABLE_TIPS",
              icon: "layui-icon-tips",
            },
          ],
          //limit:Number.MAX_VALUE, // 数据表格默认全部显示
          cols: [
            [
              { type: "numbers", width: 40, title: "序号" },
              { field: "name", width: 80, title: "操作人" },
              { field: "ip", width: 160, title: "ip" },
              { field: "date_time", width: 200, title: "时间" },
              { field: "sys_code", width: 100, title: "sys_code" },
              { field: "page_name", width: 210, title: "页面名称" },
              //{field: 'menu_id', width: 164, title: '菜单'},
              { field: "title", width: 164, title: "标题" },
              { field: "memo", width: 430, title: "备注" },
            ],
          ],
          page: false,
          done: function (res, curr, count) {
            //关闭遮罩层
            layer.closeAll("loading");
            var len = res.data.length - 1;
          },
          error: function (res) {
            //关闭遮罩层
            layer.closeAll("loading");
            layer.msg("请求失败", { icon: 2, time: 1100 });
          },
        });

        /*****************************************搜索栏接听*******************************************/
        // 监听搜索操作
        form.on("submit(data-search-btn)", function (data) {
          var result = data.field;
          console.log("re", result);
          layer.load(0, {
            shade: [0.1, "#000"],
          });
          //执行搜索重载
          table.reload("currentTableId", {
            url: `${ajaxUrlSet}/list_front_report`,
            method: "post", //如果无需自定义HTTP类型，可不加该参数
            where: {
              name: result.name, //操作人
              date_time: $("#timeformatExample1").val() ? $("#timeformatExample1").val() : "",
              ip: "",
              sys_code: result.system,
              page_name: "",
              //: '',
              title: result.title,
              memo: result.memo,
            },
          });

          return false;
        });
        // 监听重置操作
        form.on("submit(data-reset-btn)", function (data) {
          console.log("reset");
          var result = data.field;
          $("#system_select").val("14"); //重置syscode 默认为住院收费系统
          $("#timeformatExample1").val("");
          $("#searchname").val("");
          $("#searchip").val("");
          form.render();
          //执行搜索重载
          table.reload("currentTableId", {
            url: `${ajaxUrlSet}/list_front_report`,
            method: "post", //如果无需自定义HTTP类型，可不加该参数
            where: {
              name: "", //操作人
              ip: "", //ip
              date_time: "", //时间
              sys_code: "14", //系统编号
              page_name: "", //页面名称
              //menu_id: '',   //菜单编号
              title: "", //标题
              memo: "",
            },
          });

          return false;
        });
      });
      //iframe弹窗获取当前操作行数据的方法
      function getCurData() {
        return curData;
      }
    </script>
  </body>
</html>
